<template>
  <router-view class="home-container"></router-view>
  <div class="tab" ref="tabRef" v-if="navFlag">
    <div class="tab-item" @click="switchTab($event)" data-path="/home">
      <span class="tab-item-icon">&#xe62e;</span>
      <span class="tab-item-txt">首页</span>
    </div>
    <div class="tab-item" @click="switchTab($event)" data-path="/cart">
      <span class="tab-item-icon">&#xe70b;</span>
      <span class="tab-item-txt">购物车</span>
    </div>
    <div class="tab-item" @click="switchTab($event)" data-path="/order">
      <span class="tab-item-icon">&#xe8ae;</span>
      <span class="tab-item-txt">订单</span>
    </div>
    <div class="tab-item" @click="switchTab($event)" data-path="/user">
      <span class="tab-item-icon">&#xe8a0;</span>
      <span class="tab-item-txt">我的</span>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const navFlag = ref(true)
const tabRef = ref(null)
window.addEventListener('hashchange', () => {
  console.log(location.hash);

})

const router = useRouter()
const switchTab = (e) => {
  let tabList = tabRef.value.children
  for (let i = 0; i < tabList.length; i++) {
    tabList[i].className = 'tab-item'
  }

  e.target.parentNode.className += ' tab-item-active'
  console.log(e.target.parentNode.dataset.path);
  let routerPath = e.target.parentNode.dataset.path
  router.push(routerPath)
}

</script>
<style lang='scss' scoped>
@use "sass:math";
$height: 8vh;

.tab {
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 2px solid #ccc;
  background-color: #fff;
  height: $height;
  width: 100vw;
  font-family: iconfont;
  font-size: 12rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  &-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    &-active {
      color: rgb(19, 151, 244);
    }
    &-icon {
      font-size: 24rem;
    }
  }
}
.home-container {
  height: 100vh-8vh;
  overflow-y: scroll;
}
</style>
